<template>
  <div class="app" >
    <div class="content">
      <el-row>
        <span class="title">ECG</span>
      </el-row>
      <el-row >
        <div class="number-content"  >
          <span class="title">BPM</span>
          <span class="number" >{{value1}}</span>
        </div>
      </el-row>
    </div>

    <el-row >
      <div style="width: 100vw; height: 43vh;" id="EdgeInfoChart"></div>
    </el-row>
  </div>
</template>

<script setup>

import * as echarts from 'echarts';
import {onBeforeUnmount, onMounted} from "vue";

const memChart = ref({});



let timer;

let data = [];

let now = new Date(1997, 9, 3);
let oneDay = 24 * 3600 * 1000;
let value1 = ref(0);
let value2 = ref(0);
let value = Math.random() * 1000;
// for (var i = 0; i < 1000; i++) {
//   data.push(randomData());
// }
let option = {
  grid:{
    left:0,
    right:0,
    top:30,
    bottom:30,
    containLabel: true // 确保标签不被截断
  },
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      params = params[0];
      var date = new Date(params.name);
      return (
          date.getDate() +
          '/' +
          (date.getMonth() + 1) +
          '/' +
          date.getFullYear() +
          ' : ' +
          params.value[1]
      );
    },
    axisPointer: {
      animation: false
    }
  },
  xAxis: {
    // show:false,
    axisTick: {
      show: false  // 隐藏刻度线
    },
    axisLabel: {
      show: false  // 隐藏标签文字
    },
    type: 'time',
    splitLine: {
      show: false
    },
    boundaryGap: false,
  },
  yAxis: {
    show:false,
    type: 'value',
    boundaryGap: [0, '100%'],
    splitLine: {
      show: false
    },
    max:0.8
  },
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      showSymbol: false,
      data: data,
      color:'#7EFD33'
    },

  ]
};

 let myChart = ref('');
function init(){
  let myChart = echarts.init(document.getElementById('EdgeInfoChart'),'dark');

  myChart.setOption(option);

  setInterval(function () {
    if (data.length > 100) {
      // data.shift();
      data.splice(0, 50)
    }
    // data.shift();
    // data.push(randomData());
    // data = data.concat(simulateECGFrame(75))
    // data = data.concat(simulateECGBeatWithQS())
    data = data.concat(simulateECGBeatFull())
    // data = data.concat(simulatePulseWave())
    // value2.value = getRandomInt(100);
    myChart.setOption({
      series: [
        {
          data: data
        }
      ]
    });

  }, 800);
  setInterval(function (){
    value1.value = simulateBPM(75);
  },1000)
}
//
function simulateECGBeatWithQS() {
  const bpmBase = 75;
  const variation = (Math.random() * 0.04 - 0.02);
  const bpm = bpmBase * (1 + variation);
  const rr = 60000 / bpm; // 当前周期时长 ~800 ms
  const samples = 50;
  const dt = rr / samples; // 每点时间间隔 ~16 ms

  // 高斯波参数
  const rAmp = 1.0;      // R 波幅度
  const qAmp = -rAmp * 0.15; // Q 波 ~R 波的 15% 幅度
  const sAmp = -rAmp * 0.1;  // S 波 ~R 波的 10% 幅度
  // 位于周期不同时间点
  const qCenter = rr * 0.2;
  const rCenter = rr * 0.3;
  const sCenter = rr * 0.4;

  const sigma = rr * 0.03; // sigma 控制波宽，大约 30 ms

  const data = Array.from({ length: samples }, (_, i) => {
    now = new Date(+now + oneDay);
    const t = i * dt;
    const qWave = qAmp * Math.exp(-((t - qCenter) ** 2) / (2 * sigma ** 2));
    const rWave = rAmp * Math.exp(-((t - rCenter) ** 2) / (2 * sigma ** 2));
    const sWave = sAmp * Math.exp(-((t - sCenter) ** 2) / (2 * sigma ** 2));
    const noise = (Math.random() - 0.5) * 0.02;
    // return { t: t, v: qWave + rWave + sWave + noise };
    return {
      name: now.toString(),
      value: [
        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
        qWave + rWave + sWave + noise
      ]
    };
  });

  return data;
}
function simulateECGBeatFull() {
  const bpmBase = 75;
  const variation = (Math.random() * 0.04 - 0.02);
  const bpm = bpmBase * (1 + variation);
  const rr = 60000 / bpm;  // ~800 ms
  const samples = 50;
  const dt = rr / samples;

  // 波幅设置
  const pAmp = 0.12;       // P 波较低
  const rAmp = 1.1;        // R 波最大
  const tAmp = 0.17;        // T 波幅度中等
  const qAmp = -0.35;       // Q 波较为明显
  const sAmp = -0.28;      // S 波明显提升

  // 波形时间中心（ms）
  const pCenter = rr * 0.12; // ~96 ms
  const qCenter = rr * 0.3;  // ~240 ms
  const rCenter = rr * 0.32;
  const sCenter = rr * 0.34;
  const tCenter = rr * 0.6;  // ~480 ms

  // 宽度设置
  const pSigma = rr * 0.05;    // ~40 ms，P 波较宽
  const qsSigma = rr * 0.02;   // ~16 ms QRS 更窄
  const tSigma = rr * 0.07;    // ~56 ms，T 波更平滑宽

  const data = Array.from({ length: samples }, (_, i) => {
    now = new Date(+now + oneDay);
    const t = i * dt;
    const pWave = pAmp * Math.exp(-((t - pCenter) ** 2) / (2 * pSigma ** 2));
    const qWave = qAmp * Math.exp(-((t - qCenter) ** 2) / (2 * qsSigma ** 2));
    const rWave = rAmp * Math.exp(-((t - rCenter) ** 2) / (2 * qsSigma ** 2));
    const sWave = sAmp * Math.exp(-((t - sCenter) ** 2) / (2 * qsSigma ** 2));
    const tWave = tAmp * Math.exp(-((t - tCenter) ** 2) / (2 * tSigma ** 2));
    const noise = (Math.random() - 0.5) * 0.015; // 小背景噪声

    const wave = pWave + qWave + rWave + sWave + tWave + noise;
    return {
      name: now.toString(),
      value: [
        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
        wave
      ]
    };

  });

  return data;
}
function simulatePulseWave() {
  const bpmBase = 75;
  const variation = (Math.random() * 0.04 - 0.02);
  const bpm = bpmBase * (1 + variation);
  const rr = 60000 / bpm;  // ~800 ms
  const samples = 50;
  const dt = rr / samples;

  // 波峰与反射参数
  const peakCenter = rr * 0.3;       // 主峰出现在周期的 30%
  const peakSigma = rr * 0.05;       // 主峰宽度约 40 ms
  const peakAmp = 1.0;               // 主峰幅度

  const notchCenter = rr * 0.45;     // 反射波凹陷出现在晚于主峰
  const notchSigma = rr * 0.02;      // 比主峰窄
  const notchAmp = -0.3;             // 凹陷幅度（负值）

  const data = Array.from({ length: samples }, (_, i) => {
    now = new Date(+now + oneDay);
    const t = i * dt;
    const peak = peakAmp * Math.exp(-((t - peakCenter) ** 2) / (2 * peakSigma ** 2));
    const notch = notchAmp * Math.exp(-((t - notchCenter) ** 2) / (2 * notchSigma ** 2));
    const noise = (Math.random() - 0.5) * 0.05;
    const wave = peak + notch + noise;
    return {
      name: now.toString(),
      value: [
        [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
        wave
      ]
    };
  });

  return data;
}
function resizeCharts() {
  const halfWidth = window.innerWidth / 2;
  const height = window.innerHeight * 0.7; // 保持高度为屏幕70%

  document.getElementById('EdgeInfoChart').style.width = `${halfWidth}px`;
  document.getElementById('EdgeInfoChart1').style.width = `${halfWidth}px`;
  // 保持高度不变
  document.getElementById('EdgeInfoChart').style.height = `${height}px`;
  document.getElementById('EdgeInfoChart1').style.height = `${height}px`;
}

function simulateBPM(baseBpm) {
  // 模拟 ±2% 的窦性心律变异
  const variation = (Math.random() * 0.04 - 0.02);
  const currentBpm = baseBpm * (1 + variation);
  return Math.round(currentBpm);
}
// 初始化并监听窗口变化
// window.addEventListener('load', resizeCharts);
// window.addEventListener('resize', resizeCharts);
onMounted(() => {
  // initNetWork();
  // initEdgeInfo()
  init();
  let myChart = echarts.init(document.getElementById('EdgeInfoChart'),'dark');
  window.addEventListener('resize', function() {
    myChart.setOption({
      grid: { left: 0, right: 0 }
    });
    myChart.resize();
  });
  document.body.style.overflow = 'hidden';
  document.documentElement.style.overflow = 'hidden';
})
onBeforeUnmount(() => {
  // if (timer) {
  //   clearInterval(timer)
  // }
})


</script>
<style lang="scss" scoped>
* {
  overflow: hidden !important;
}
.content{
  border: 2px solid #656565;
  background-color: #100c2a;
  .title{
    font-size: 1.5rem;
    font-weight: bold;
    color: #7EFD33;
    padding: 20px;
  }
}
.number-content{

  //width: 100vw;
  //height: 50vh;
  //justify-content: center;
  ////align-items: end;
  //display: flex;
  //flex-direction: column;
  .number{
    font-size: 10rem;
    font-weight: bold;
    color: #7EFD33
  }
  .title{
    font-size: 1.5rem;
    font-weight: bold;
    color: #7EFD33;
    padding: 20px;
  }
  width: 100vw;
  height: 49vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中（取消注释并改为center） */
}
</style>
